import { HomeOutlined, RightOutlined } from '@ant-design/icons';
import axios from 'axios';
import { useEffect, useState, useMemo } from 'react';
import styles from './Contacts.module.css';
import {useNavigate} from'react-router-dom'

export default function Contacts() {
    const navigate = useNavigate();
    const [list, setList] = useState(sessionStorage.getItem('list') ? JSON.parse(sessionStorage.getItem('list')) : []);
    const [page, setPage] = useState(1);
    const pageSize = 5; // 每页显示5条

    const getList = async () => {
        let { data: { contact } } = await axios.get('http://localhost:3000/getContact', { params: { _id: sessionStorage.getItem('userid') } });
        sessionStorage.setItem('list', JSON.stringify(contact));
      
    };

    useEffect(() => {
        getList();
    }, []);

    // 计算分页数据
    const pagedList = useMemo(() => {
        const start = (page - 1) * pageSize;
        return list.slice(start, start + pageSize);
    }, [list, page]);

    const totalPages = Math.ceil(list.length / pageSize);

    // 获取头像显示内容
    const getAvatar = (item) => {
        if (item.head && item.head.trim() !== '') return item.head;
        if (item.name && item.name.length > 0) return item.name[0].toUpperCase();
        return '?';
    };

    // 随机生成头像背景色
    const getAvatarBg = (name) => {
        const colors = ['#FFB6C1', '#87CEFA', '#FFD700', '#90EE90', '#FFA07A', '#B0E0E6', '#DDA0DD'];
        let code = 0;
        if (name && name.length > 0) code = name.charCodeAt(0);
        return colors[code % colors.length];
    };

    return (
        <div className={styles.container}>
            <h2 className={styles.title}>联系人</h2>
            <div className={styles.header}>
                <HomeOutlined /> <RightOutlined /> 联系人
            </div>
            <ul className={styles.list}>
                {pagedList.map(item => (
                    <li
                        key={item._id}
                        className={styles.card}
                        onClick={()=>{navigate('/chat',{state:{id:item._id}})}}
                    >
                        <div
                            className={styles.avatar}
                            style={{ background: getAvatarBg(item.name) }}
                        >
                            {getAvatar(item)}
                        </div>
                        <span className={styles.name}>{item.name}</span>
                        <span style={{margin:'10px'}}></span>
                        <span className={styles.name}>{item.telp}</span>
                    </li>
                ))}
            </ul>
            <div className={styles.pagination}>
                <button
                    className={styles.btn}
                    onClick={() => setPage(p => Math.max(1, p - 1))}
                    disabled={page === 1}
                >上一页</button>
                <span className={styles.pageInfo}>{page} / {totalPages}</span>
                <button
                    className={styles.btn}
                    onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                    disabled={page === totalPages}
                >下一页</button>
            </div>
        </div>
    );
}